<template>
  <div style="position:relative;">
    <div style="">
      <div style="height: 116px;width: 210px;display: inline-block;">
        <div style="font-weight: 800;">
          <span style="font-size: 24px;line-height: 24px;">{{ item.xmbzNo }}</span>
          <span style="position: absolute;margin-top: 2px;" v-if="danceLabelMap[item.isDance] !== undefined">（{{danceLabelMap[item.isDance] || '-'}}）</span>
        </div>

        <div style="">
          <span style="font-weight: 800;font-size: 12px">品名：{{item.goodsName}}(<span>{{ tranSpecs(item.goodsSpecs) }}</span>)</span>
        </div>

        <div style="font-size: 12px;">平台单号：{{ item.platformOrderId }}</div>

        <div style="font-size: 12px;font-weight: 800;">
          <span>仓库：{{ item.branchWarehouse }}{{changeWarehouse(item.warehouseName)}}</span>
        </div>

        <div style="font-size: 11px; ">{{ productDate }}</div>
        <div style="font-size: 11px; ">配送时间:&nbsp;{{ item.deliveryStartTime.slice(0,16) }}~{{ item.deliveryEndTime.slice(11,16) }}</div>
        <div style="font-size: 11px; ">提取码:&nbsp;{{ item.code }}</div>
      </div>
      <div style="font-size: 11px;text-align: right;margin-right: 10px;position: absolute;right: 0;top: 0;">
        <div :data-orderId="item.orderId" :data-orderDetailId="item.id" :data-productionState="item.productionState" ref="qrCodeDiv" style="text-align: right;"></div>
        <barcode tag="img" :value="item.id" :options="{height:22,width:1, displayValue: false,margin:1}"  style="margin-top: 2px;"></barcode>
      </div>
    </div>
    <div style="font-size: 11px; margin-bottom: 2px">
      <div style="font-size: 11px; ">配送地址：{{ item.receiverAddress}}</div>
    </div>

    <div style="font-size:11px;">
      <span style="font-size: 12px;display: inline-block;width: 45%;">订单来源：{{ item.channelName}}</span>
      <span style="margin-left: 8px;display: inline-block;width: 45%;" v-if="isShow()">保质期：24小时</span>
    </div>
    <div style="">
      <span style="font-weight: 800;font-size: 12px;">祝福语：{{ item.blessings }}</span>
    </div>
    <div style="font-size:10px;">
      <div v-if="isShow()">储藏方式：0℃-8℃冷藏保存</div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import VueBarcode from '@xkeshi/vue-barcode';
import { danceLabelMap } from '@/const'
export default {
  components: { barcode: VueBarcode },
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    needIngredient: {
      type: Boolean,
    },
  },
  data() {
    return {
      danceLabelMap
    }
  },
  computed: {
    productDate() {
      const label = (this.item.printingAlias && this.item.printingAlias.productionDateName) || '生产日期'
      return `${label}：${this.dayjs().format('YYYY-MM-DD')}`
    },
  },
  methods: {
    changeWarehouse(item){
      if(item){
        return `-${item}`
      }else{
        return ''
      }
    },
    tranSpecs(value) {
      return value ? value.replace(/-熊猫人免费送货上门跳舞/g, '').replace(/-不用熊猫跳舞/g, '') : ''
    },
    changeNum(Num){
      if(String(Num)<=8){
        return Num
      }else{
        let newArr = String(Num).split('')
        newArr.splice(8,0,'#')
        return newArr.join('')
      }
    },
    creatQrCode() {
      if (this.$refs.qrCodeDiv) {
        var qrcode =  new QRCode(this.$refs.qrCodeDiv, {
          text: `${this.item.id}`,
          width: 80,
          height: 80,
          colorDark: "#333333", //二维码颜色
          colorLight: "#ffffff", //二维码背景色
          correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
        })
        setTimeout(()=>{
          let imgs = this.$refs.qrCodeDiv.getElementsByTagName('img');
          for (let i = 0; i < imgs.length; i++) {
            imgs[i].removeAttribute('style')
          }
        }, 50)
      }
    },
    isShow(){
      return !this.needIngredient
    }
  },
  mounted() {
    this.creatQrCode()
  }
}
</script>

<style lang="scss" scoped>

</style>
